:root{
	--backgroundDark: rgba(39,52,58,1);
	--backgroundLight: #9EA5A8;
	--accentColour: #FF0022;
	--accentColourBright: #FFD7DC;
	--accentColour2: #FF8C3B;
	--accentColour2Bright: #FFDAC2;
	--neonBorder: 3px solid var(--accentColourBright);
	--borderRadius: 10px;
}

#sidebar{
	width: 370px;
	min-width:300px;
	box-sizing: border-box;
	padding:10px;
	text-align: center;
}

#sidebar .neonList{
	margin:auto;
	flex-direction: column;
}

#sidebar a{
	//display:block;
	//margin:auto;
	max-width:100%;
	cursor:pointer;
}

#sidebar img{
	max-width:100%;
}

#mainContent{
	flex-grow: 1;
	padding:20px;
	color: white;
  text-shadow: 0px 0px 5px black, 0px 0px 10px black, 0px 0px 20px black;
  font-family: regen;
  box-sizing: border-box;
}

#mainContent a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  text-shadow: 0px 0px 2px var(--accentColour);
}

#panels img{
	display:block;
	max-width:100%;
}

#panelContainer{
	margin: auto;
  max-width: 800px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: var(--neonBorder);
  border-color: var(--accentColourBright);
  border-radius: var(--borderRadius);
  filter: drop-shadow(0px 0px 10px var(--accentColour));
}

.navbar {
  text-align: center;
  padding: 20px;
}

body{
	margin:0;
	display:flex;
	flex-direction: column;
	min-height:100vh;
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, var(--backgroundDark) 100%);
}

#sidebar\&Content{
	flex-grow: 1;
	display:flex;
}

footer{
	box-sizing: border-box;
	padding:10px;
	text-align: center;
}

footer a{
	text-decoration: none;
	color:var(--accentColour2);
	cursor:pointer;
}

#indexcontainer{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-evenly;
	align-items: center;
	height: 100%;
}

.indexentry{
	display: inline-block;
  position: relative;
  width: 200px;
	aspect-ratio: 1;
  margin: 10px;
  text-align: center;
  border: var(--neonBorder);
   border-color: var(--accentColourBright);
  border-radius: 10px;
  filter: drop-shadow(0px 0px 10px var(--accentColour));
  overflow: hidden;
}

.indexentry img {
  width: 100%;
	height:100%;
	position: relative;
	filter: drop-shadow(0px 0px 10px var(--accentColour));
}

.indexentry h3 {
  display: block;
  position: absolute;
  width: 100%;
  background: #000;
  margin-top: auto;
  z-index: 1;
  color: white;
  border-bottom: var(--neonBorder);
   border-color: var(--accentColourBright);
  padding: 5px;
  box-sizing: border-box;
}

.navbar a, #sidebar a{
	
	
}

@font-face{
	font-family:regen;
	src: url("Regen.otf");
}

.neonList{
	position:relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

footer{
	font-size:1em !important;
	border-radius:0px !important;
	border-left:none !important;
	border-right:none !important;
	border-bottom:none !important;
	margin:0px !important;
	margin-top:10px !important;
}

.neonList a, footer{
	color: var(--accentColourBright);
	font-family: regen;
	border:var(--neonBorder);
	 border-color: var(--accentColourBright);
	border-radius: var(--borderRadius);
	filter: drop-shadow(0px 0px 10px var(--accentColour));
	margin:10px;
	text-shadow: 0px 0px 5px var(--accentColour);
	padding:10px;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	font-size: 1.35em;
	--meshWidth:2px;
	--meshTileSize:7px;
	background: linear-gradient(rgba(1,1,1,0.5), rgba(1,1,1,0.5)), repeating-linear-gradient(45deg, #000, #000 var(--meshWidth), #9198e500 var(--meshWidth), #9198e500 var(--meshTileSize)), repeating-linear-gradient(-45deg, #000, #000 var(--meshWidth), #9198e500 var(--meshWidth), #9198e500 var(--meshTileSize));
}

.neonList a:hover, .indexentry:hover{
	--accentColour:var(--accentColour2);
	--accentColourBright:var(--accentColour2Bright);
}

.neonList a.disabled{
	color:brown;
	border-color: brown;
	filter: none;
	text-shadow:none;
}

body:after{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100dvw;
	height:100dvh;
	opacity:0.3;
	backdrop-filter: blur(2px) brightness(1);
	pointer-events: none;
}

body.disabledEffects:after{
	display:none;
}

#noiseOverlay{
	position: fixed;
	  top: 0;
	  left: 0;
	  height: 100dvh;
	  width: 100dvw;
	  //background-image: repeating-linear-gradient(0deg,black 0px, black 4px, white 4px, white 8px), url("noise overlay.gif");
	  background-image: repeating-linear-gradient(0deg,black 0px, black 4px, white 4px, white 8px);
	  mix-blend-mode: overlay;
	  opacity: 0.1;
	  pointer-events: none;
	  //background-blend-mode: overlay, normal;
}

body.disabledEffects #noiseOverlay{
	display:none;
}

::selection{
	background:var(--accentColour2);
}

#backgroundVideo{
	position: fixed;
  height: 100dvh;
  width: 100dvw;
  object-fit: cover;
  opacity: 0.1;
  pointer-events: none;
}

body.disabledEffects #backgroundVideo{
	display:none;
}

#additionalCredits{
	display:block;
}

.hidden{
	display:none !important;
}

@media only screen and (max-width: 1100px) {
	#sidebar\&Content{
		flex-direction: column;
	}
	
	#sidebar{
		max-width:100%;
		width:100%
	}
	
	#sidebar .neonList{
		flex-direction: row;
	}
	
	#mainContent{
		max-width:100%;
		width:100%;
	}
	
	#panelContainer{
		max-width:100%;
	}
}